<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>product</title>
    <!--移动端支持-->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <!--ios-->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!--电话号码识别-->
    <meta name="format-detection" content="telephone=no" />
    <!--邮箱识别-->
    <meta content="email=no" name="format-detection" />
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"/>
    <meta name="HandheldFriendly" content="true">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.css">
    <link rel="stylesheet" href="./css/font-awesome.min.css">
    <link rel="stylesheet" href="./styles/product.css">
    <script src="./js/jquery-3.0.0.js"></script>
    <script src="./js/bootstrap.js"></script>
    <script src="./js/unslider-min.js"></script>
    <script src="./js/jquery.event.swipe.js"></script>
</head>
<body>
<header>
    <p>
        欢迎,sitename
    </p>
    <p>
        用户名
        <a href="#">登录</a>
    </p>
</header>
</body>
<script src="./js/avalon.modern.js"></script>
<script>
    $(function () {
        var vm = avalon.define({
            $id : 'product',
            bodycss : {}
        });
        avalon.scan(document.body);
        var bodycss = {};
        bodycss['width'] = $(window).innerWidth();
        bodycss['height'] = $(window).innerHeight();
        vm.bodycss = bodycss;


        //可视区监听
        $(window).resize(function () {
           bodycss['width'] = $(window).innerWidth();
           bodycss['height'] = $(window).innerHeight();
        });
    });
</script>
</html>